<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ page isELIgnored="false" %>
<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>李宁体育管理系统</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
	<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<link href="css/font-awesome.min93e3.css?v=4.4.0"rel="stylesheet">
     <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet"><base target="_blank"> 
    <style type="text/css">
	.feed-activity-list .feed-element {
		border-bottom: 1px solid #e7eaec;
	}
	
	.feed-element, .media-body {
		overflow: hidden;
	}
	
	.feed-element, .feed-element .media {
		margin-top: 15px;
	}
	
	.feed-element {
		padding-bottom: 15px;
	}
	.ibox-content {
    background-color: #fff;
    color: inherit;
    padding: 15px 20px 20px;
    border-color: #e7eaec;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    border-width: 1px 0;
}
.filehidden {}
</style>
  </head>
  <body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>新增投票</h5>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Panel Other -->
    <div class="ibox float-e-margins" id="tableShow">
        
            <div class="row m-t">
                <div class="col-sm-12">
                      <form class="form-horizontal m-t"  id="votingVipActivityForm">
                      <div class="ibox-content">
                      <div class="feed-activity-list">
                      <div class="feed-element ">
									<div class="form-group">
									    <label class="col-sm-2 control-label">活动标题</label><font color="red">*</font>
									    <div class="col-sm-3">
											<input type="text" class="form-control" name="title" id="title" maxlength="12" placeholder="活动名称(不少于5个字符)"></input>
									    </div>
									    <span id="error_title" style="color: red">*</span>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">活动时间</label><font color="red">*</font>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="beginTime" id="beginTime" placeholder="开始时间"></input>
										</div>
										<span id="error_beginTime" style="color: red">*</span>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label"></label><font color="red">*</font>
										<div class="col-sm-3">
											<input type="text" class="form-control" name="endTime" id="endTime" placeholder="结束时间"></input>
										</div>
										<span id="error_endTime" style="color: red">*</span>
									</div>
									<div class="form-group">
										<label class="col-sm-2 control-label">活动人数</label><font color="red">*</font>
										<div class="col-sm-3">
											<input type="number" class="form-control" name="joinNum" id="joinNum" placeholder="人数" maxlength="5"></input>
										</div>
										<span id="error_joinNum" style="color: red"></span>
									</div>
									</div>
									
								</div>


							<div class="ibox-content">
								
								<div class="feed-element">
									<div class="media-body ">
										<div class="form-group">
											<label class="col-sm-2 control-label"></label><font
												color="red"></font>
											<div class="col-sm-3">
												<a  id="AddFileBox" class="btn btn-info">添加问题</a>
											</div>
											<span id="errWt" style="color: red;"></span>
										</div>
									</div>
								</div>
								
								
								
								<div class="form-group" id="Inputs">
									  
								</div>
								
								<div class="feed-element">
								<div class="form-group">
                                         <div class="col-sm-4 col-sm-offset-3">
                                          <button class="btn btn-primary" type="submit" >保  存</button>
                                          &nbsp;<button class="btn btn-info" type="button" onclick="goBackVipActivity()">返  回</button>
                                         </div>
                                    </div>
                                </div>
                             </div>
                             </div>
                    </form>
                </div>
            </div>
        
        
  
    </div>
    <div style="display: none;position: relative;
    top: -50px;" class="modal" id="myModal" tabindex="-1"role="dialog" aria-labelledby="myModalLable" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <%--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>--%>
                <h4 class="modal-title" id="myModallabel">消息提示</h4>
            </div>
            <div class="modal-body">
                <span id="deletecontent"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="confirm" onclick="confirm()">确定删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel" onclick="cancel()">取消删除</button>

            </div>
        </div>
    </div>
</div>
</div>


<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery.serializeObject.js"></script>
<!--时间选择-->
<script src="js/plugins/layer/laydate/laydate.js"></script>
<script src="js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
<script src="js/plugins/ajaxfileupload.js"></script>
<script src="js/plugins/layer/layer.js"></script>
	<script type="text/javascript">
    $(document).ready(function() {  
        /* var txtarr = ['一','二','三','四','五','六','七','八','九','十']
        var resetOptOrder = function () {
    		var ellist = $("#InputsWrapper .form-group .control-label");
    		for (var ii=0; ii<ellist.length; ii++) {
    			ellist.eq(ii).html('选项'+txtarr[ii]);
    		}
    	}
    	var MaxInputs = 9; 
    	var InputsWrapper = $("#InputsWrapper");  
    	var AddButton = $("#AddMoreFileBox"); 	  
    	var x = InputsWrapper.length;  
    	var FieldCount=1;  	
    	
     	
     	
    	$(AddButton).click(function (e)  
    	{  
    	        if(x <= MaxInputs)   
    	        {  
    	            FieldCount++; 	            
    	            $(InputsWrapper).append('<div class="form-group">'+
    	            
    	            '<label class="col-sm-2 control-label">选项'+txtarr[x - 1]+'</label><div class="col-sm-3"><input type="text"  name="wt['+(x - 1)+']" id="wt_'+ FieldCount +'" class="form-control"/></input>'+
    	            '</div>'+
    	            
    	            
    	        	'<div class="ibox float-e-margins col-sm-6" style="margin-left:220px;margin-top:30px">'+
	    	        '<div class="form-group">'+
	    	        '<input class="filehidden" id="lefile'+ x +'" name="lefile'+ x +'" type="file" style="opacity: 0;" >'+ 
	    	        '<div class="col-sm-1">'+
	    	             '<a class="btn btn-info" onclick="$(\'input[id=lefile'+x+']\').click();">选择图片</a>'+
	    	             '</div>'+ 
	    	             '<div class="col-sm-5" style="margin-left:20px">'+
	    	            '<input id="photoCover'+x+'" name ="photoCover'+x+'" class="input-large form-control" value="" type="text" style="height:30px;">'+  
	    	              '</div>'+
	    	              '<div class="file-box">'+
                          '<div class="file">'+
                              '<a>'+
                                  '<span class="corner"></span>'+
                                  '<div class="image" >'+
                                      '<img   id="img'+x+'" alt="" class="img-responsive" src="" style="width:100%;height:100%">'+
                                  '</div>'+
                             ' </a>'+
                          '</div>'+
                      '</div>'+
	    	        '</div>'+ 
	    	        '<a href="#" class="removeclass">删 除</a>&nbsp;&nbsp;&nbsp;&nbsp;'+
    	            '<span id="imgHint'+ x +'" style="color:red">图片比例1:1，建议尺寸120x120px</span>'+
	    	        '</div>'+
	    	        
	    	        '</div>'
    	            );
    	        	
    	        	$('input[id=lefile'+ x +']').change(function() { 
    	        		fileUpload(this,x);
					  $("#photoCover"+(x-1)+"").val($(this).val());   
					}); 
    	        	
    	            x++; 
    	            resetOptOrder();
    	        }
    	        
    	return false;  
    	});  	  
    	$("body").on("click",".removeclass", function(e){
    	        if( x > 1 ) {  
    	                $(this).parents('.form-group').remove();
    	                resetOptOrder();
    	                x--; 
    	                FieldCount--;
    	}  
    	return false;  
    	});  */
    	
    	var MaxInputs = 9; 
    	var FieldCount=1;
    	 
    	$("#AddFileBox").click(function (e){
    		var InputsWrapper = $("#Inputs");
        	var x = InputsWrapper.length; 
 	    	        if(x <= MaxInputs)   
 	    	        {  
 	    	        	
 	    	          	var height = ($(window).height())*0.5;
 	    	   		    var width = ($(window).width())*0.6;
 	    	   		layer
 	    	   				.open({
 	    	   					title : "添加问题",
 	    	   					extend: ['skin/layer.css'], //加载新皮肤
 	    	   					skin: 'layui-layer-lan', //一旦设定，所有弹层风格都采用此主题。
 	    	   					type : 2,
 	    	   					fix : true, //不固定 
 	    	   					maxmin : true,
 	    	   					area : [ width + "px", height + "px" ],
 	    	   					content :"<%=basePath%>activity/toAddVoteWt?account="+FieldCount
 	    	   				});
 	    	        	
 	    	        	
 	    	        	
 	    	        	
 	    	        	MaxInputs++;
 	    	        	FieldCount++;
 	    	        }
 	    	        
    	});  	        
    	
    	$("#Inputs").on("click",".fa-times",function(){
    		$(this).parent().parent().parent().parent().remove();
    	})
    	
    	
    	
    	
    	$("#votingVipActivityForm").validate({
    		rules: {
    			title: {
    				required: true,
    				rangelength:[5,20]
    			},
    			beginTime: {
    				required: true,
    			},
    			endTime: {
    				required: true,
    				
    			},
    			joinNum: {
    				required: true,
    				
    			}
    		},
    		messages:{
    			title:{
    				required: "用户名不能为空"
    			},
    			beginTime:{
    				required: "开始时间不能为空"
    			},
    			endTime:{
    				required: "结束时间不能为空"
    			},
    			joinNum:{
    				required: "参与人数不能为空"
    			}
    		
    		},
    		errorPlacement: function(error, element) {
    			$( element ).closest( "form" ).find( "span[id='error_" + element.attr( "name" ) + "']" ).append( error );
    		},
    	    onkeyup: false,
    		submitHandler:function(){
    			var roleForm = $("#votingVipActivityForm").serializeObject();
    			console.log(JSON.stringify(roleForm));
    			jQuery.ajax({
    				type: "post",
    			    url: "<%=path%>/activity/toSaveActivityVote",
    			    contentType: "application/json",
    			    data: JSON.stringify(roleForm),
    			    beforeSend:function() {
    			    	$("#progress").modal();
    			    	$("#loading").html("正在提交用戶数据，请稍候...");

    			    },
    			    complete:function(data) {
    			    	$("#progress").modal('hide');
    			    	$("#loading").html("");
    			    }, 
    			    success: function (data) {
    			    	if(data.status==200){
    			    		parent.layer.msg("保存数据信息成功!",{time: 500},function(){goBackVipActivity();});
    			    	}else{
    			    		parent.layer.msg("保存数据信息失败!");			    		
    			    	}
    			    },
    			    error: function () {
    			    	parent.layer.msg("保存运营者数据信息失败,请联系管理员!");
    			    }	
    			});
    		}
    		
    	}); 
    	}); 
	
	
	
	
		//表单验证
		var config = {
			".chosen-select" : {},
			".chosen-select-deselect" : {
				allow_single_deselect : !0
			},
			".chosen-select-no-single" : {
				disable_search_threshold : 10
			},
			".chosen-select-no-results" : {
				no_results_text : "Oops, nothing found!"
			},
			".chosen-select-width" : {
				width : "95%"
			}
		};

		//日期选择框
		var start = {
			elem : "#beginTime",
			format : "YYYY-MM-DD hh:mm:ss",
			min : laydate.now(),
			max : "2099-06-16",
			istime : true,
			istoday : false,
			choose : function(datas) {
				end.min = datas;
				end.start = datas
			}
		};
		var end = {
			elem : "#endTime",
			format : "YYYY-MM-DD hh:mm:ss",
			min : start,
			max : "2099-06-16",
			istime : true,
			istoday : false,
			choose : function(datas) {
				start.max = datas
			}
		};
		laydate(start);
		laydate(end);
		
		
		var goBackVipActivity=function(){
			window.location.href="<%=basePath%>activity/toVotePage"
		}
		
	var	fileUpload = function(sender,x) {
			$.ajaxFileUpload({
				url : '<%=basePath%>activity/voteFileUpload', // 用于文件上传的服务器端请求地址
				type : 'post',
				data : {
					"index":x,
					"extension" : ".png,.jpg,.jpeg"
				}, // JSON格式
				secureuri : false, // 一般设置为false
				fileElementId : 'lefile'+(x-1)+'', // 文件上传空间的id属性 <input type="file" id="file" name="file" />
				dataType : 'json', // 返回值类型 一般设置为json
				global : true,
				success : function(response, status) { // 服务器成功响应处理函数
				  if (response.status==200) {
					  $("#photoCover"+(x-1)+"").val(response.data);
					  $("#img"+(x-1)+"").attr("src",response.data);
						
					} 
				},
				error : function(data, status, e) {// 服务器响应失败处理函数
					/* _showInfoMessage(e, 'error'); */
					alert(x);
				}
			});
		}
    
	</script>

  </body>
  <script src="js/plugins/dropzone/dropzone.js"></script>
</html>
